<template>
  <div style="width:100%;height:100%;">
    <div ref="map" id="map" style="width:100%;height:100%;">
    </div>
    <div class="get-location-info" ref="info">
      <form
        role="form"
        class="form-inline"
        style="position:relative;display:flex;align-items:center;"
      >
        <div class="form-group">
          <span>线粗：</span>
          <input type="text" class="frmpubInput formtext stroke-width" title="线粗" value="4">
        </div>
        <!-- <div class="map-color-picker-fill form-group colorpicker-component" data-color="#0000FF">
                <span class="fill-color-title">填充色：</span>
                <input type="hidden" class="fill-color-input fill-color" title="填充色" value="#0000FF">
                <i class="fill-color-background"></i>
        </div>-->

        <div
          class="map-color-picker-fill form-group colorpicker-component"
          data-color="#0fa5e9"
          data-border-color="#6ac0e6"
        >
          <span>填充色：&nbsp;</span>
          <input type="hidden" class="fill-color-input fill-color" title="填充" value="#000000">
          <span class="fill-color-background"/>
        </div>

        <!-- <div class="map-color-picker-stroke form-group  colorpicker-component" data-color="#000000">
                <span class="fill-color-title">线颜色：</span>
                <input type="hidden" class="fill-color-input stroke-color" title="线颜色" value="#000000">
                <i class="fill-color-background"></i>
        </div>-->
        <div class="form-group" style="display:none;">
          <span>地图级别：</span>
          <input type="text" class="frmpubInput formtext map-level" title="地图级别" value>
        </div>
        <div class="form-group">
          <span>中心点：</span>
          <span>{{centerValueStatus}}</span>
          <input type="hidden" class="frmpubInput formtext center-value" title="中心点" value>
        </div>
        <div class="form-group">
          <span>描边：</span>
          <span>{{strokeValueStatus}}</span>
          <input type="hidden" class="frmpubInput formtext stroke-value" title="描边" value>
        </div>

        <div class="form-group">
          <a-button @click="saveData" type="primary">保存</a-button>
        </div>
      </form>
    </div>
    <div class="get-location-tool" ref="tool">
      <a-button class="" icon="environment" title="设置中心点" @click="setCenter"/>
      <a-button class="" icon="star" title="画热区" @click="drawPolygon" />
      <i class="fa fa-pencil draw-line" title="画路线"/>
      <i class="fa fa-circle-o draw-circle" title="画圆形"/>

      <i class="fa fa-trash-o clear-layers" title="清空所有图形"/>
      <i class="fa fa-hand-paper-o cancel-drawing" title="取消画图状态"/>
      <i class="fa fa-hand-paper-o redo-drawing" title="初始化画图状态"/>
      <i class="fa fa-map-o switch-planimetric" title="平面/卫星地图"/>
      <!--  <i class="fa fa-globe switch-_25" title="2.5维地图"></i> -->
      <i class="fa fa-exchange show-siblings-region tool-show-region" title="显示同级辖区"/>
      <i class="fa fa-long-arrow-up show-parent-region tool-show-region" title="显示上级辖区"/>
      <i class="fa fa-long-arrow-down show-children-region tool-show-region" title="显示下级辖区"/>
    </div>
    <div class="contextmenu contextmenu_container" v-if="false">
      <ul>
        <li>删除当前选中图形</li>
        <li>隐藏右键菜单</li>
      </ul>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Zs } from "@/utils/ol.extend.js";
export default {
  data() {
    return {
      zs: null,
      centerValueStatus: "未设置",
      strokeValueStatus: "未设置",
      lonlat:"",
      geom: "",
      backgroundColor: "",
      borderColor: "",
      fillColor: "",
      strokeColor: "",
      strokeWidth: 1,
      borderSize: 1,
      mapLevel: ""
    };
  },
  props: {
    data: {
      type: Object,
      default: function(){
        return {};
      }
    }
  },
  created(){

  },
  mounted() {
    var width = window.innerWidth-40;
    var height = window.innerHeight- 15 - 50;
    this.$refs['map'].style.width = width+'px';
    this.$refs['map'].style.height = height +'px';
    this.$refs['info'].style.width = width -20 +'px';
    this.$refs['tool'].style.height = height +10 +'px';
    this.zs = new Zs({
      target: "map"
    });
    setTimeout(() => {
       this.initOriginalData();
    }, 500);
   
  },
  methods: {

    //初始化数据
    initOriginalData() {
      debugger
      var self = this;
      var zs = this.zs;
      var data = this.data;

      var bgColor =
        data && data.backgroundColor ? data.backgroundColor : "#000000";
      var bgColorP = bgColor.substring(1);
      var bdColor = data && data.borderColor ? data.borderColor : "#000000";
      var bdColorP = bdColor.substring(1);

      if (data) {
        // mapData = data;
        this.setMapData(data);
        if (data.mapLevel) {
          var level = parseInt(data.mapLevel);
          level && zs.map.getView().setZoom(level);
        }

        this.fillColor = bgColor;
        this.strokeColor = bdColor;

        if (data.borderSize) this.borderSize = data.borderSize;

        if (data.lonlat) {
          this.centerValueStatus = "已设置";
          zs.map
            .getView()
            .setCenter(zs.format.readGeometry(data.lonlat).getCoordinates());
          zs.pointLayer = zs.addFeatures(
            [
              {
                lonlat: data.lonlat
              }
            ],
            {
              isShowImg: true
            }
          ).layer;
          zs.pointLayer.setZIndex(1010);
          zs.pointLayer.setStyle(zs.pointStyle);
        }
        var info;
        if (data.geom) {
          this.strokeValueStatus = "已设置";
          info = zs.addFeatures(
            [
              {
                lonlat: data.lonlat,
                geom: data.geom
              }
            ],
            {
              isSetStyle: false
            }
          );
          var style = new ol.style.Style({
            //设置feature的样式
            fill: new ol.style.Fill({
              color: fillColor
            }),
            stroke: new ol.style.Stroke({
              width: parseInt(data.borderSize) || 2,
              color: bdColor
            })
          });
          info.layer.setZIndex(1000);
          info.layer.setStyle(style);
        }
        zs.initEdit({
          modifyEnd: function(data) {
            self.setMapData(data);
          },
          layer: (info && info.layer) || null
        });
      }
    },
    setCenter() {
      var that = this;
      this.zs.setCenter(function(data, event) {
        that.lonlat = data;
        that.centerValueStatus = "已设置";
      });
    },
     drawPolygon(){
        this.drawBase('Polygon');
     },
    drawBase(type) {
      var that = this;
      var options = {
          type: type,
          style: {
            fillColor: this.fillColor,
            strokeColor: this.strokeColor,
            strokeWidth: parseInt(this.strokeWidth)
          },
          drawEnd: function (data) {
              that.setMapData(data);
          },
          modifyEnd: function (data) {
              that.setMapData(data)
          }
      };
      this.zs.initDraw(options);
    },
    setMapData(data){
      this.lonlat = data.point;
      this.geom = data.geom;
      // 中心设置
      this.centerValueStatus = '已设置';
      // 描边设置
      this.strokeValueStatus = '已设置';
    },
    saveData(){
      this.$emit("mapData",this.lonlat)
    }
  }
};
</script>
<style scoped>
.get-location-info {
  position: absolute;
  left: 40px;
  top: 50px;
  width: 100%;
  height: 38px;
  background: #ccc;
}

.get-location-info .form-group {
  height: 35px;
  margin-top: 2.5px;
  margin-left: 15px;
}

/* .get-location-info .form-group:first-child{margin-left:10px;margin-right:20px;} */

/* .get-location-info .form-group:first-child>label{height:32px;line-height: 32px;} */

.get-location-info .form-group:last-child {
  margin-left: 8px;
}

.get-location-info .map-color-picker {
  margin-top: 0px;
  margin-bottom: 2px;
}

.get-location-info .form-group > label > span {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
}

.get-location-info .form-group > span {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
}

.get-location-info .form-group input {
  float: left;
  height: 30px;
  width: 40px;
  padding-left: 5px;
  line-height: 30px;
}

.fill-color-background {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 1px solid #d5d6da;
}

.fill-color-input {
  float: left;
  height: 34px;
  line-height: 34px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: none;
  width: 135px;
}

.stroke-size {
  width: 40px;
}

.map-level {
  width: 40px;
}

.get-location-tool {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 50px;
  left: 0px;
  width: 40px;
  height: 100%;
  background: #3b3b42;
  color: #fff;
}

.loaction-tool-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
}

.get-location-tool i {
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-bottom: 20px;
  width: 40px;
  height: 40px;
}

.get-location-tool i:first-child {
  margin-top: 20px;
}

.get-location-tool #switchPlanimetric {
  font-size: 16px;
}

#map {
  height: 100%;
  width: 100%;
}

.colorpicker {
  z-index: 19901020;
}
</style>
